<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"><el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">添加作物</el-button></el-col>
      <el-col :span="1.5"><el-button type="primary" icon="el-icon-plus" size="mini" @click="gettotal" v-if="this.current==1">其他页</el-button></el-col>
<!--      <el-col :span="1.5"><el-button type="primary" icon="el-icon-plus" size="mini" v-if="this.current!== 1" @click="list">首页</el-button></el-col>-->
    </el-row>
    <!-- 添加或修改农作物对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="cropperForm"  label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="作物名称" prop="nickName">
              <el-input v-model="cropperForm.name" placeholder="请输入作物名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作物类型" prop="nickName">
              <el-select v-model="cropperForm.tid" placeholder="请选择">
                <el-option v-for="dict in dictTypes" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="肥料名称" prop="nickName">
              <el-input v-model="cropperForm.fertilizerName" placeholder="请输入肥料名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="种植方式" prop="nickName">
              <el-select v-model="cropperForm.sid" placeholder="请选择">
                <el-option v-for="dict in dictPlantings" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="种植年度" prop="nickName"><el-input v-model="cropperForm.plantingYear" placeholder="请输入种植年度" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否套袋" prop="nickName">
              <el-select v-model="cropperForm.bagStatus" placeholder="请选择" >
                <el-option    value="0"  label="不套袋"></el-option>
                <el-option     value="1" label="套袋"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="施肥周期" prop="nickName"><el-input v-model="cropperForm.fertilizationCycle" placeholder="请输入施肥周期" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="灌溉周期" prop="nickName"><el-input v-model="cropperForm.irrigationCycle" placeholder="灌溉周期" /></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="nickName"><el-input v-model="cropperForm.address" placeholder="请输入详细地址" /></el-form-item>          </el-col>
          <el-col :span="12">
            <el-form-item label="除草周期" prop="nickName"><el-input v-model="cropperForm.weedingCycle" placeholder="请输入除草周期" /></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="育苗周期" prop="nickName"><el-input v-model="cropperForm.seedlingCycle" placeholder="请输入育苗周期" /></el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注"><el-input v-model="cropperForm.remark" type="textarea" placeholder="请输入内容"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createCrops">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-pagination style="width: 100px;height: 30px"
                   @current-change="gopage"
                   :page-size="size"
                   layout="total, prev, pager, next"
                   :total="total">
    </el-pagination>
    <!--1视图-->
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
            fixed
            prop="id"
            label="id"
            width="150">
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="fertilizerName"
            label="肥料名称"
            width="120">
        </el-table-column>
        <el-table-column
            prop="plantingYear"
            label="种植年度"
            width="120">
        </el-table-column>
        <el-table-column
            prop="seedlingCycle"
            label="育苗周期"
            width="120">
        </el-table-column>

        <el-table-column
            prop="fertilizationCycle"
            label="施肥周期"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="详细地址"
            width="120">
        </el-table-column>
        <el-table-column
            prop="bagStatus"
            label="是否套袋"
            width="120">
          <template v-slot="s">
            <span v-if="s.row.bagStatus==0">不套袋</span>
            <span v-if="s.row.bagStatus==1">套袋</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="irrigationCycle"
            label="灌溉周期"
            width="120">
        </el-table-column>
        <el-table-column
            prop="weedingCycle"
            label="除草周期"
            width="120">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            width="300">
        </el-table-column>
        <el-table-column
            prop="plantingCondition"
            label="状态"
            width="120">
          <template v-slot="s">
            <el-tag v-if="s.row.plantingCondition==0">种植中</el-tag>
            <el-tag type="danger" v-if="s.row.plantingCondition==1">已出售</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleRecord(scope.row)" type="text" size="small">记录周期</el-button>
            <el-button size="mini" type="text" @click="cropsProcessDetail(scope.row)">过程详情</el-button>
<!--            <el-button v-show="scope.row.status === 0" size="mini" type="text" @click="noticeTrasport(scope.row)">通知运输</el-button>-->
            <el-button v-show="scope.row.plantingCondition === 0" size="mini" type="text" @click="noticeTrasport(scope.row)">通知运输</el-button>
            <el-button v-show="scope.row.plantingCondition === 1" size="mini" type="text" @click="logisticsTrace(scope.row)">物流追踪</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

    <!-- 记录作物生长 -->
    <el-dialog center title="记录作物生长情况" :visible.sync="growDialog" width="700px" append-to-body>
      <el-form ref="form" label-width="80px" :model="recordForm">
        <el-row>
          <el-col :span="24" align="center">{{ cropsName }}</el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="温度" prop="nickName"><el-input v-model="recordForm.temperature" placeholder="请输入温度" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生长情况" prop="nickName"><el-input v-model="recordForm.growth" placeholder="请输入生长情况" /></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="水分" prop="nickName"><el-input v-model="recordForm.hydration" placeholder="请输入水分" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="光照情况" prop="nickName"><el-input v-model="recordForm.light" placeholder="请输入光照情况" /></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="nickName"><el-input v-model="recordForm.remark" type="textarea" placeholder="请输入内容"></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生长图片:">
              <el-upload  class="avatar-uploader"
                          action="http://localhost:10010/cropservice/crop/addPic"
                          :show-file-list="false"
                          :on-success="getFile"
                          :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="recordCropsGrow">确 定</el-button>
        <el-button size="mini" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 过程详情 -->
    <el-drawer size="80%" :visible.sync="cropsProcessDetaiDialog" :show-close="false" :with-header="false">
      <el-divider content-position="left">农作物生长表详情</el-divider>
      <el-table v-loading="loading" :data="cropsProcessDetailsArray">
        <el-table-column label="过程ID" prop="id" />
        <el-table-column label="作物ID" prop="crops_bak_id" />
        <el-table-column label="生长状态" prop="growth" />
        <el-table-column label="光照情况" prop="light" />
        <el-table-column label="记录时间" prop="record_time" />
        <el-table-column label="温度" prop="temperature" />
        <el-table-column label="水分状态" prop="hydration" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="图片" class="pic">
          <template slot-scope="scope">
            <el-image :preview-src-list="scope.row.pic" :src="scope.row.pic" style="width: 100px;height: 80px"></el-image>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
<!--    通知运输-->
    <el-dialog center title="联系运输" :visible.sync="noticeDetaiDialog" width="500px" append-to-body>
      <el-form ref="form" :model="trasportForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="选择司机" prop="nickName">
              <el-select v-model="trasportForm.driverId" placeholder="请选择">
                <el-option v-for="user in driverList" :key="user.id" :label="user.haulerName" :value="user.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="原料厂商" prop="nickName">
              <el-select v-model="trasportForm.ingredientsId" placeholder="请选择">
                <el-option v-for="dept in factoryList" :key="dept.id" :label="dept.producerName" :value="dept.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="trasportForm.remarks" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNoticeTrasport">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--轨迹弹出框-->
    <el-drawer size="80%" :visible.sync="playTrackView" :show-close="false" :with-header="false">
      <el-divider content-position="left">物流追踪</el-divider>
      <!-- <el-container style="height: 600px; border: 1px solid #eee">
        <el-main>
          <div class="map-page" style="height: 100%"><div id="position"></div></div>
        </el-main>
      </el-container> -->
      <div id="container" class="map"></div>
    </el-drawer>
  </div>

</template>

<script>

import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "CropView",
  data() {
    return {
      title:'',
      cropperForm:{},
      formLabelWidth:'80px',
      form:{},
      open:false,
      //2属性定义
      tableData:[],
      current:1,
      size:5,
      total:0,
      totala:0,
      dictTypes:[],
      dictPlantings:[],
      cropsName:"",
      cropsInfo:"",
      growDialog:false,
      recordForm:{},
      imageUrl:"",
      cropsProcessDetaiDialog:false,
      cropsProcessDetailsArray:[],
      playTrackView:false,
      trasportInfo:{},
      noticeDetaiDialog:false,
      trasportForm:{},
      driverList:[],
      factoryList:[],
      myList:[111.219946,35.140733],
    }
  },
  mounted() {
    window._AMapSecurityConfig = {
      //权限服务安全密钥
      securityJsCode: "e94e0e0afa1842f9327e06ca955297a7",
    };
    }
  , methods: {
    /**
     * 物流追踪
     */
    logisticsTrace() {
      this.playTrackView=true
      AMapLoader.load({
        key: "d0a13e507309316024509a088bf8cfee", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
          .then((AMap) => {
            const lineArr = [
              [116.320193, 40.033007], //开始坐标
              this.myList, //途径坐标
              [114.939217, 36.35926],//途径坐标
              [114.90146, 35.972016],//最后坐标
            ];
            var map  = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "3D", // 是否为3D地图模式
              resizeEnable: true,
              center: [116.320193, 40.033007],//允许地图容器在窗口大小改变时自动调整地图大小，保持地图的可视性。
              zoom: 9 //用于控制地图的细节级别。数字越大，表示地图被放大得越详细，可以看到更小的地理特征；数字越小，表示地图被缩小，显示的区域范围更大，但细节更少。
            });
            var marker = new AMap.Marker({
              position: [116.320193, 40.033007],
              icon: 'https://webapi.amap.com/images/car.png',
              //坐标偏移
              offset: new AMap.Pixel(-26, -13),
              autoRotation: true,
              angle: -90,
              map: map
            });
            // 绘制轨迹路线
            var polyline = new AMap.Polyline({
              map: this.map,
              //这里替换自己的坐标数据
              path: lineArr,
              borderWeight: 2, // 线条宽度，默认为 1
              strokeColor: 'red', // 线条颜色
              lineJoin: 'round' // 折线拐点连接处样式
            });
            map.add(polyline);
            //调用方法开启动画
            marker.moveAlong(lineArr, 30000);
          })
          .catch((e) => {
            console.log(e);
          });
    },
    addNoticeTrasport() {
      this.trasportForm.cropId = this.trasportInfo.id;
      this.trasportForm.cropName = this.trasportInfo.name;
      this.trasportForm.farmer = this.trasportInfo.userName;
      this.trasportForm.indate = new Date();
      this.trasportForm.status = 0;
      alert(this.trasportForm.farmer);
      console.log("-----------"+this.trasportForm.farmer)
      this.axios.post("/cropservice/crop/saveIngredientsCropServiceList",this.trasportForm).then(
          res=>{
            if (res.data.code==200){
              this.$message.success('联系运输成功');
              this.noticeDetaiDialog = false;
              this.list();
            }
          }
      )
    },
    // getHaulerList
    getdriverList(){
      this.axios.post("/cropservice/crop/getHaulerList").then(
          res=>{
            this.driverList=res.data.data;
          }
      )
    },
    getingredientsList(){
      this.axios.post("/cropservice/crop/ingredientsList").then(
          res=>{
            this.factoryList = res.data.data;
          }
      )
    },
    /**
     * @param {Object} row通知运输
     */
    noticeTrasport(row) {
      this.trasportInfo = row;
      this.getdriverList();
      this.getingredientsList();
      this.noticeDetaiDialog = true;
    },
    cropsProcessDetail(row) {
      this.axios
          .get( '/cropservice/crop/getDetailsByCid?cid=' + row.id)
          .then(res => {
            // const array = [];
            // for (let i = 0; i < res.data.length; i++) {
            //   array.push(res.data[i].data);
            // }
            this.cropsProcessDetailsArray = res.data.data;
            this.cropsProcessDetaiDialog = true;
          })
    },
    getFile(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      alert(res)
      this.recordForm.pic=res;
    },
    recordCropsGrow() {
      this.axios
          .post('/cropservice/crop/saveDetails',this.recordForm )
          .then(res => {
            if (res.data.code === 200) {
              this.$message.success('数据添加成功');
              this.growDialog = false;
            }
          })
          .catch(err => {
            this.$message.error('存储异常 ' + err);
          });
    },
    handleRecord(row) {
      this.cropsName = row.name;
      this.cropsInfo = row;
      this.recordForm.cropId=row.id;
      this.growDialog = true;
    },
    createCrops(){
      this.axios.post("/cropservice/crop/saveCrop",this.cropperForm).then(
          res=>{
            if (res.data.code==200){
              this.$message.success("添加农作物成功");
              this.open=false;
              this.list();
            }
          }
      )
    },
    getPlantingList(){
      this.axios.post("/cropservice/crop/wayList").then(
          res=>{
            console.log(res.data.data)
            this.dictPlantings=res.data.data;
          }
      )
    },
    getTypeList(){
      this.axios.post("/cropservice/crop/typeList").then(
          res=>{
            console.log(res.data.data)
           this.dictTypes=res.data.data;
          }
      )
    },
    handleAdd(){
      this.open=true;
      this.title='添加';
    },
    //3自定义方法
    gopage(current){
      this.current=current;
      this.list();
    },
    list(){
      this.axios.post("/cropservice/crop/list?current="+this.current+"&size="+this.size).then(res=>{
        if(res.data.code==200){
          this.tableData=res.data.data.list;
          this.total=res.data.data.total;
        }
      })
    },
    gettotal(){
      this.axios.post("/cropservice/crop/total?current="+this.current+"&size="+this.size).then(res=>{
        if(res.data.code==200){
          this.total=res.data.data;
        }
      })
    }
  }, created() {
    //4.钩子函数
    // this.gettotal();
    this.list();
    this.getTypeList();
    this.getPlantingList();
  }
}
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
.map {
  width: 100%;
  height: 500px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>